<template>
  <div class="container">
    <tiny-tabs
        style="width:80%"
        tab-style="card"
        v-model="activeName"
    >
      <tiny-tab-item title="文章" name="article">
        <div class="article-list" v-if="contentList.length > 0">
          <div class="list">
            <ContentList :operation-flag="operationFlag" />
          </div>
        </div>
        <div v-else>
          <tiny-user-head class="head-item" type="label" round v-model="userHeadTest"></tiny-user-head>
        </div>
      </tiny-tab-item>
      <tiny-tab-item title="帖子" name="post">
        <div class="post-list">
          <div class="post" v-for="post in postList" :key="post.id">
            <div class="title">{{post.title}}</div>
            <div class="image">
              <img :src="post.coverImage" width="200" height="160" alt="封面">
            </div>
            <div class="operation" v-if="userId === currentUser.id">
              <tiny-button type="danger">删除</tiny-button>
            </div>
          </div>
        </div>
<!--        <tiny-user-head class="head-item" type="label" round v-model="userHeadTest"></tiny-user-head>-->
      </tiny-tab-item>
    </tiny-tabs>
    <div class="search">
      <tiny-search
          style="margin-top:20px"
          v-model="searchInput"
          placeholder="请输入关键词"
          @search="handleSearch"
      >
      </tiny-search>
    </div>
  </div>

</template>

<script setup>
import {
  Tabs as TinyTabs,
  TabItem as TinyTabItem,
  Search as TinySearch,
  UserHead as TinyUserHead, Modal,
  Button as TinyButton
} from '@opentiny/vue'
import {useRoute,useRouter} from "vue-router";
import {onMounted, onUnmounted, ref} from 'vue'
import ContentList from "../components/ContentList.vue";
import {useContentStore} from "../store/useContentStore.js";
import {storeToRefs} from "pinia";
import request from "../utils/request.js";
import {userName} from "../config/index.js";

document.title = '内容管理'
const contentStore = useContentStore()
const {contentList, contentListVisible} = storeToRefs(contentStore)
contentListVisible.value = true
const route = useRoute()
const router = useRouter()
const userId = route.params.userId
const activeName = ref('article')
const pageNum = ref(1)
const pageSize = ref(150000)
const userHeadTest = ref('暂无')
const searchInput = ref('')
const operationFlag = ref(false)
const currentUser = ref(localStorage.getItem(userName) ? JSON.parse(localStorage.getItem(userName)) : {})
const postList = ref([])




// 搜索内容
const handleSearch = () => {
  if (activeName.value === 'article'){
    // 搜索文章
    request.get('/api/contents/articles/ownArticleVO',{
      params:{
        userId,
        title:searchInput.value
      }
    }).then(res => {
      if (res.code === 1){
        contentList.value = res.data
      }else {
        Modal.message({message: res.message, status: 'error'})
      }
    })
  }else if (activeName.value === 'post') {
    // 搜索帖子
    queryPostList()
  }
}
handleSearch()

// 查询帖子
const queryPostList = () => {
  request.get('/api/contents/posts/ownPost',{
    params:{
      userId,
      title:searchInput.value
    }
  }).then(res => {
    if (res.code === 1){
      postList.value = res.data
      console.log('@@@', postList.value)
    }else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}
queryPostList()

// 初始化
const init = () => {
  // 判断是否显示操作栏
  if (currentUser.value.id === Number(userId)){
    operationFlag.value = true
  }
}
init()

onUnmounted(() => {
  contentListVisible.value = false
})

</script>

<style lang="less" scoped>
.post-list{
  .post:hover{
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  }
  .post{
    .operation{
      text-align:center;
      margin-top:10px;
    }
    .title{
      font-size:17px;
      font-weight:bold;
      cursor:pointer;
    }
    width:210px;
    height:220px;
    margin:0 0 20px 20px;
    border:1px solid #ddd;
    border-radius:5px;
    padding:10px;
  }
  display: flex;
  flex-wrap: wrap;
}
.article-list{
  .list{
    width:100%;
  }
  display: flex;
}
.container{
  width: 90%;
  display: flex;
}

</style>
